import React, {memo, useCallback} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableHighlight,
  Dimensions,
} from 'react-native';
import Colors from '../../utils/Colors';
import PatIcon from '../base/PatIcon';
import {useNavigation} from '@react-navigation/native';
const windowWidth = Dimensions.get('window').width;
const Header = props => {
  const {padding, isTop} = props;
  const count = 11;
  const style = StyleSheet.create({
    headerBox: {
      height: 34 + padding,
      width: '100%',
      marginTop: 0,
      position: 'absolute',
      backgroundColor: 'rgba(0,0,0,0)',
      zIndex: 9,
    },
    headerBoxTop: {
      height: 34 + padding,
      width: '100%',
      marginTop: 0,
      position: 'absolute',
      backgroundColor: Colors.white,
      zIndex: 9,
    },
    arrowLeft: {
      position: 'absolute',
      top: 4 + padding,
      left: 10,
      width: 25,
      height: 25,
      borderRadius: 50,
      backgroundColor: 'rgba(0,0,0,0.6)',
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: 10,
    },
    search: {
      color: Colors.patFontGray2,
      fontSize: 14,
      marginLeft: 10,
    },
    cart: {
      position: 'absolute',
      top: 4 + padding,
      right: 10,
      width: 25,
      height: 25,
      borderRadius: 50,
      backgroundColor: 'rgba(0,0,0,0.6)',
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: 10,
    },
    count: {
      position: 'absolute',
      width: 14,
      height: 14,
      fontSize: 10,
      backgroundColor: Colors.patFontRed,
      color: Colors.white,
      borderRadius: 50,
      top: -5,
      right: -5,
      textAlign: 'center',
    },
    share: {
      position: 'absolute',
      top: 4 + padding,
      right: 45,
      width: 25,
      height: 25,
      borderRadius: 50,
      backgroundColor: 'rgba(0,0,0,0.6)',
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: 10,
    },
  });
  const navigation = useNavigation();
  const goCart = useCallback(() => {
    console.log('去购物车');
    navigation.navigate('about');
  }, [navigation]);
  const goBack = useCallback(() => {
    navigation.goBack();
  }, [navigation]);
  const onShare = useCallback(() => {
    console.log('分享');
  }, []);
  if (isTop) {
    return (
      <View style={isTop ? style.headerBoxTop : style.headerBox}>
        <TouchableHighlight
          activeOpacity={1}
          underlayColor={'rgba(0,0,0,0.6)'}
          style={[style.arrowLeft, {backgroundColor: 'rgba(0,0,0,0)'}]}
          onPress={goBack}>
          <PatIcon name="arrow-left" size={14} color={Colors.patFontGray} />
        </TouchableHighlight>
        <TouchableHighlight
          activeOpacity={1}
          underlayColor={'rgba(0,0,0,0.6)'}
          style={[style.share, {backgroundColor: 'rgba(0,0,0,0)'}]}
          onPress={onShare}>
          <PatIcon name="share" size={16} color={Colors.patFontGray} />
        </TouchableHighlight>
        <TouchableHighlight
          style={[style.cart, {backgroundColor: 'rgba(0,0,0,0)'}]}
          onPress={goCart}>
          <View>
            <PatIcon name="shopping-bag" size={16} color={Colors.patFontGray} />
            {count > 0 ? <Text style={style.count}>{count}</Text> : null}
          </View>
        </TouchableHighlight>
      </View>
    );
  } else {
    return (
      <View style={style.headerBox}>
        <TouchableHighlight
          activeOpacity={1}
          underlayColor={'rgba(0,0,0,0.6)'}
          style={style.arrowLeft}
          onPress={goBack}>
          <PatIcon name="arrow-left" size={14} color={Colors.white} />
        </TouchableHighlight>
        <TouchableHighlight
          activeOpacity={1}
          underlayColor={'rgba(0,0,0,0.6)'}
          style={style.share}
          onPress={goBack}>
          <PatIcon name="share" size={16} color={Colors.white} />
        </TouchableHighlight>
        <TouchableHighlight style={style.cart} onPress={goCart}>
          <View>
            <PatIcon name="shopping-bag" size={16} color={Colors.white} />
            {count > 0 ? <Text style={style.count}>{count}</Text> : null}
          </View>
        </TouchableHighlight>
      </View>
    );
  }
};

export default memo(Header);
